<template>
  <div class="app-container">
    <div class="container">
      <el-tabs v-model="activeName" type="border-card" tab-position="top" class="statisTab" @tab-click="handClick">
        <el-tab-pane label name="1">
          <span slot="label">
            <i class="el-icon-s-release" /> 市场交易分析和预测
          </span>
          <MarketTransactionAnalysis ref="marketTransactionAnalysis" :fields="fieldList" />
        </el-tab-pane>
        <el-tab-pane label name="2">
          <span slot="label">
            <i class="el-icon-s-marketing" /> 市场分析和预测图
          </span>
          <MarketAnalysisChart ref="marketAnalysisChart" :fields="fieldList" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import MarketTransactionAnalysis from './MarketTransactionAnalysis'
import MarketAnalysisChart from './MarketAnalysisChart'
export default {
  components: {
    MarketTransactionAnalysis,
    MarketAnalysisChart
  },
  data() {
    return {
      activeName: '1'
    }
  },
  computed: {},
  created() {},
  watch: {},
  async mounted() {
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['marketAnalysisChart'].myChart)
        this.$refs['marketAnalysisChart'].infoSize()
    }
  },
  methods: {
    async handClick(tab) {
      if (tab.name == '2') {
        setTimeout(async () => {
          this.$refs['marketAnalysisChart'].getTableInfo()
        }, 100)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  padding: 10px;
}
</style>

<style lang='scss' >
.statisticsStyle {
  .el-tabs--border-card {
    margin-top: 10px;
    // border: none !important;
    box-shadow: none !important;
  }
}
.statisTab {
  .el-tabs__header {
    margin: 0 0 5px;
    .el-tabs__item {
      height: 34px;
      line-height: 34px;
    }
  }
  .el-tabs__content {
    padding: 5px !important;
  }
}
</style>
